<template>
  <div class="profile-page">
    <transition name="fade" appear>
      <div class="profile-header">
        <h1 class="profile-title">个人中心</h1>
        <p class="profile-subtitle">管理您的个人信息和账户设置</p>
      </div>
    </transition>
    
    <el-row :gutter="20">
      <el-col :span="7" :xs="24">
        <transition name="slide-left" appear>
          <el-card class="profile-card user-info-card" shadow="hover">
            <div class="profile-info">
              <div class="profile-avatar">
                <userAvatar />
                <div class="user-basic-info">
                  <h3 class="user-name">{{ user.nickName || user.userName }}</h3>
                  <p class="user-role">{{ roleGroup }}</p>
                </div>
              </div>
              
              <div class="profile-details">
                <div class="info-row">
                  <div class="info-item">
                    <i class="el-icon-mobile-phone info-icon"></i>
                    <div class="info-content">
                      <span class="info-label">手机号码</span>
                      <span class="info-value">{{ user.phonenumber || "未设置" }}</span>
                    </div>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-message info-icon"></i>
                    <div class="info-content">
                      <span class="info-label">邮箱</span>
                      <span class="info-value">{{ user.email || "未设置" }}</span>
                    </div>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <i class="el-icon-office-building info-icon"></i>
                    <div class="info-content">
                      <span class="info-label">所属部门</span>
                      <span class="info-value">{{ (user.dept && user.dept.deptName) || "未设置" }}</span>
                    </div>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-s-custom info-icon"></i>
                    <div class="info-content">
                      <span class="info-label">所属角色</span>
                      <span class="info-value">{{ postGroup }}</span>
                    </div>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <i class="el-icon-time info-icon"></i>
                    <div class="info-content">
                      <span class="info-label">创建日期</span>
                      <span class="info-value">{{ user.createTime || "未设置" }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="profile-actions">
                <el-button type="primary" icon="el-icon-edit" @click="editProfile">编辑资料</el-button>
              </div>
            </div>
          </el-card>
        </transition>
        
        <transition name="slide-left" appear>
          <el-card class="profile-card activity-card" shadow="hover">
            <div slot="header" class="card-header">
              <span class="card-title">活动统计</span>
            </div>
            <div class="activity-stats">
              <div class="stat-item">
                <div class="stat-icon login-icon">
                  <i class="el-icon-user"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-value">{{ loginCount }}</div>
                  <div class="stat-label">登录次数</div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon operation-icon">
                  <i class="el-icon-s-operation"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-value">{{ operationCount }}</div>
                  <div class="stat-label">操作次数</div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon time-icon">
                  <i class="el-icon-time"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-value">{{ onlineTime }}</div>
                  <div class="stat-label">在线时长</div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon date-icon">
                  <i class="el-icon-date"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-value">{{ lastLoginDate }}</div>
                  <div class="stat-label">最近登录</div>
                </div>
              </div>
            </div>
          </el-card>
        </transition>
      </el-col>
      
      <el-col :span="17" :xs="24">
        <transition name="slide-right" appear>
          <el-card class="profile-card" shadow="hover">
            <el-tabs v-model="selectedTab" class="profile-tabs">
              <el-tab-pane label="基本资料" name="userinfo">
                <userInfo :user="user" @refresh="getUser" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPwd">
                <resetPwd />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar"
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getUserProfile } from "@/api/system/user"

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      selectedTab: "userinfo",
      // 用户活动统计数据
      loginCount: 0,
      operationCount: 0,
      onlineTime: "0小时",
      lastLoginDate: ""
    }
  },
  created() {
    const activeTab = this.$route.params && this.$route.params.activeTab
    if (activeTab) {
      this.selectedTab = activeTab
    }
    this.getUser()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
        this.initActivityStats()
      })
    },
    editProfile() {
      this.selectedTab = "userinfo"
    },
    // 初始化用户活动统计数据
    initActivityStats() {
      // 模拟数据，实际应用中应该从后端API获取
      this.loginCount = Math.floor(Math.random() * 100) + 20
      this.operationCount = Math.floor(Math.random() * 500) + 100
      this.onlineTime = Math.floor(Math.random() * 50) + 10 + "小时"
      
      // 格式化最近登录日期
      if (this.user.loginDate) {
        const loginDate = new Date(this.user.loginDate)
        const now = new Date()
        const diffTime = Math.abs(now - loginDate)
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
        
        if (diffDays === 0) {
          this.lastLoginDate = "今天"
        } else if (diffDays === 1) {
          this.lastLoginDate = "昨天"
        } else if (diffDays < 7) {
          this.lastLoginDate = diffDays + "天前"
        } else {
          this.lastLoginDate = loginDate.toLocaleDateString()
        }
      } else {
        this.lastLoginDate = "首次登录"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  
  .profile-header {
    margin-bottom: 24px;
    text-align: center;
    
    .profile-title {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
    }
    
    .profile-subtitle {
      font-size: 16px;
      color: #909399;
      margin: 0;
    }
  }
  
  .profile-card {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    &.user-info-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      
      ::v-deep .el-card__body {
        padding: 0;
      }
      
      .profile-info {
        padding: 24px;
      }
      
      .profile-avatar {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        
        .user-basic-info {
          margin-left: 16px;
          
          .user-name {
            font-size: 22px;
            font-weight: 600;
            margin: 0 0 4px 0;
            color: white;
          }
          
          .user-role {
            font-size: 14px;
            opacity: 0.8;
            margin: 0;
          }
        }
      }
      
      .profile-details {
        .info-row {
          display: flex;
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .info-item {
            flex: 1;
            display: flex;
            align-items: center;
            
            .info-icon {
              font-size: 18px;
              margin-right: 8px;
              opacity: 0.8;
            }
            
            .info-content {
              display: flex;
              flex-direction: column;
              
              .info-label {
                font-size: 12px;
                opacity: 0.7;
                margin-bottom: 4px;
              }
              
              .info-value {
                font-size: 14px;
                font-weight: 500;
              }
            }
          }
        }
      }
      
      .profile-actions {
        margin-top: 24px;
        text-align: center;
        
        .el-button {
          background-color: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
          color: white;
          
          &:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.4);
          }
        }
      }
    }
    
    &.activity-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .card-title {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
        }
      }
      
      .activity-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        
        .stat-item {
          display: flex;
          align-items: center;
          padding: 12px;
          border-radius: 8px;
          background-color: #f8f9fa;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #e9ecef;
            transform: translateY(-2px);
          }
          
          .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            
            i {
              font-size: 18px;
              color: white;
            }
            
            &.login-icon {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }
            
            &.operation-icon {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }
            
            &.time-icon {
              background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            }
            
            &.date-icon {
              background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            }
          }
          
          .stat-content {
            .stat-value {
              font-size: 18px;
              font-weight: 600;
              color: #303133;
              line-height: 1.2;
            }
            
            .stat-label {
              font-size: 12px;
              color: #909399;
              margin-top: 2px;
            }
          }
        }
      }
    }
    
    .profile-tabs {
      ::v-deep .el-tabs__header {
        margin-bottom: 20px;
      }
      
      ::v-deep .el-tabs__nav-wrap::after {
        display: none;
      }
      
      ::v-deep .el-tabs__item {
        font-size: 16px;
        font-weight: 500;
        color: #606266;
        
        &.is-active {
          color: #409eff;
        }
      }
      
      ::v-deep .el-tabs__active-bar {
        background-color: #409eff;
      }
    }
  }
}

// 页面过渡动画
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all 0.5s ease;
}

.slide-left-enter, .slide-left-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.5s ease;
}

.slide-right-enter, .slide-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .profile-page {
    padding: 15px;
    
    .profile-header {
      margin-bottom: 20px;
      
      .profile-title {
        font-size: 24px;
      }
      
      .profile-subtitle {
        font-size: 14px;
      }
    }
    
    .profile-card {
      margin-bottom: 15px;
      
      &.user-info-card {
        .profile-avatar {
          flex-direction: column;
          text-align: center;
          
          .user-basic-info {
            margin-left: 0;
            margin-top: 16px;
          }
        }
        
        .profile-details {
          .info-row {
            flex-direction: column;
            
            .info-item {
              margin-bottom: 12px;
            }
          }
        }
      }
      
      &.activity-card {
        .activity-stats {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .profile-page {
    padding: 10px;
    
    .profile-header {
      .profile-title {
        font-size: 20px;
      }
    }
    
    .profile-card {
      &.user-info-card {
        .profile-info {
          padding: 16px;
        }
      }
    }
  }
}
</style>
